<template>
	<view>
		<view class="flex justify-between item-center">
			<text class="text-color-regular" :class="value ? 'font-semibold' : ''">{{title}}</text>
			<uni-datetime-picker ref="datetimePicker" v-model="range" type="datetimerange" @change="onDatetimeChange" :isDefaultTime="isDefaultTime">
				<view v-if="!value" class="flex justify-end item-center">
					<text class="text-color-hint">{{placeholder}}</text>
					<image class="w-16 h-17 ml-4" src="@/static/svg/icon-arrow-right.svg"></image>
				</view>
			</uni-datetime-picker>
			<!--
			<view v-if="!value" class="flex justify-end item-center" @click="showDatetimePicker">
				<text class="text-color-hint">{{placeholder}}</text>
				<image class="w-16 h-17 ml-4" src="@/static/svg/icon-arrow-right.svg"></image>
			</view>
			<view v-else>
			</view>
			-->
		</view>
		<view v-if="value" class="mt-8 radius-4 bg-default text-color-regular fs-14 py-4">
			<view class="px-12 h-28 flex justify-between item-center" @click="showDatetimePicker('start')">
				<text>{{startText}}</text>
				<view class="flex item-center">
					<text>{{value[0]}}</text>
					<image class="size-12 ml-4" src="@/static/svg/icon-arrow-right.svg"></image>
				</view>
			</view>
			<view class="mt-8 px-12 h-28 flex justify-between item-center" @click="showDatetimePicker('end')">
				<text>{{endText}}</text>
				<view class="flex item-center">
					<text>{{value[1]}}</text>
					<image class="size-12 ml-4" src="@/static/svg/icon-arrow-right.svg"></image>
				</view>
			</view>
		</view>
		<datetime-picker ref="datePicker"></datetime-picker>
	</view>
</template>	

<script setup>
	import { ref, watchEffect } from 'vue'
	import DatetimePicker from '@/components/datetime-picker/datetime-picker.vue'
	
	const props = defineProps({
		disable: {
			type: Boolean,
			default: false
		},
		disableTip: {
			type: String
		},
		disableStart: {
			type: Boolean,
			default: false
		},
		disableStartTip: {
			type: String
		},
		disableEnd: {
			type: Boolean
		},
		disableEndTip: {
			type: String
		},
		title: {
			type: String,
			default: '起止时间'
		},
		placeholder: {
			type: String,
			default: '未设置'
		},
		startText: {
			type: String,
			default: '开始时间'
		},
		endText: {
			type: String,
			default: '结束时间'
		},
		start: {
			type: [String, Number]
		},
		startDate: {
			type: String,
		},
		endDate: {
			type: String,
		},
		value: {
			type: Array,
			default: []
		},
		isDefaultTime: {
			type: Boolean,
			default: false
		},
	})
	
	const emits = defineEmits(['change'])
	
	const range = ref([])
	
	const datetimePicker = ref(null)
	const date = ref('')
	const datePicker = ref(null)
	
	const showDatetimePicker = (type) => {
		if (props.disable) {
			if (props.disableTip) {
				uni.showToast({
					icon: 'none',
					title: props.disableTip
				})
			}
			return
		} else if (type === 'start' && props.disableStart) {
			if (props.disableStartTip) {
				uni.showToast({
					icon: 'none',
					title: props.disableStartTip
				})
			}
			return
		} else if (type === 'end' && props.disableEnd) {
			if (props.disableEndTip) {
				uni.showToast({
					icon: 'none',
					title: props.disableEndTip
				})
			}
			return
		}
		datetimePicker.value.show()
		// console.log('showPicker', e, datetimePicker.value)
		// datetimePicker.value.open()
		// console.log('datePicker show', datePicker.value)
		// datePicker.value && datePicker.value.open()
	}
	
	const onDatetimeChange = (val) => {
		emits('change', val)
	}
	
	const confirm = (e) => {
		console.log('confirm', e)
	}
	
	watchEffect(() => {
		range.value = props.value
	})
</script>
